<!--编辑分类-->
<template>
  <div class="addSecond">
    <div class="footerBox">
      <addhead headname="编辑分类"></addhead>
      <el-form :model="form" ref="form" label-width="150px" class="demo-dynamic" :rules="rules">
        <el-form-item label="层级：" required>
          <p class="hierarchy">三级</p>
        </el-form-item>
        <el-form-item required prop="firstLevelName" label="所属一级分类：">
          <el-input v-model="form.firstLevelName" readonly class="parent-name"></el-input>
        </el-form-item>
        <el-form-item required prop="secondLevelName" label="所属二级分类：">
          <el-input v-model="form.secondLevelName" readonly class="parent-name"></el-input>
        </el-form-item>
        <el-form-item prop="name" label="三级分类名称：">
          <el-input v-model="form.name" placeholder="字数长度1~20字"></el-input>
        </el-form-item>
        <el-form-item required prop="classtax">
          <span slot="label">选择税收分类：</span>
          <el-select
            filterable
            remote
            reserve-keyword
            placeholder="请选择"
            :remote-method="remoteTax"
            :value="form.classtax.name"
            @change="onTaxChange"
          >
            <el-option v-for="item in taxclass" :key="item.id" :label="item.name" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item required>
          <span slot="label">税收编码：</span>
          <el-input v-model="form.classtax.code" readonly></el-input>
        </el-form-item>

        <el-form-item required>
          <span slot="label">税率：</span>
          <el-input v-model="form.classtax.taxRate" readonly>
            <template slot="append">%</template>
          </el-input>
        </el-form-item>

        <el-form-item prop="administratoritem">
          <span slot="label">分类管理员账号：</span>
          <el-select
            :value="form.administratoritem.userName"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            @change="onchange"
          >
            <el-option v-for="item in options" :key="item.id" :label="item.userName" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span slot="label">分类管理员姓名：</span>
          <el-input v-model="form.administratoritem.realName" readonly></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="addDraft('form')" type="primary">保存至草稿</el-button>
          <el-button type="primary" @click="addReview('form')">保存并提交审核</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import addhead from "@/components/common/head/head";
import {
  update3,
  updateSubmit3,
  updateSecond,
  searchTax,
  classinfo3,
  simplelist,
  checkNameLevel
} from "@/api/classManage";
import { setTimeout } from "timers";
export default {
  inject: ["close"],
  name: "CategoryUpdate3",
  data() {
    var checkName = (rule, value, callback) => {
      var reg = /^[^"'”“‘’]+$/;
      if (!reg.test(value)) {
        callback(new Error("不能包含特殊字符"));
      } else if (value !== this.flagname) {
        checkNameLevel({
          level: 3,
          name: value
        }).then(res => {
          if (res.code == "000000") {
            callback();
          }
        });
      } else if (value == this.flagname) {
        callback();
      }
    };
    return {
      flagname:'',
      id: 0,
      taxclass: [],
      options: [],
      form: {
        firstLevelName: "",
        secondLevelName: "",
        name: "",
        parentName: "",
        classtax: {},
        administratoritem: {}
      },
      rules: {
        name: [
          { required: true, message: '分类名字不能为空', trigger: 'blur' },
          { min:1, max:20, message: '长度在 1 到 20 个字', trigger: 'blur' },
          { validator: checkName, trigger: "blur" }
        ],
        firstLevelName: [
          { required: true, message: "请输入分类名称", trigger: "blur" }
        ],
        secondLevelName: [
          { required: true, message: "请输入分类名称", trigger: "blur" }
        ],
        administratoritem: [
          { required: true, message: "请选择管理员", trigger: "blur" }
        ]
      }
    };
  },
  components: {
    addhead
  },
  activated() {
    var that = this;
    this.id = this.$route.query.id;
    this.getdetail(that.id);
  },
  methods: {
    onTaxChange(val) {
      this.form.classtax = val;
    },
    remoteTax(query) {
      if (query) {
        searchTax(query).then(res => {
          if (res.code == "000000") {
            this.taxclass = res.data;
          }
        });
      }
    },
    onchange(val) {
      this.form.administratoritem = val;
    },
    remoteMethod(query) {
      simplelist({
        count: 6,
        userName: query
      }).then(res => {
        if (res.code == "000000") {
          this.options = res.data;
        }
      });
    },
    getdetail(id) {
      classinfo3(id).then(res => {
        this.form.firstLevelName = res.data.firstLevelCategoryName;
        this.form.secondLevelName = res.data.secondLevelCategoryName;
        this.form.name = res.data.name;
        this.flagname = JSON.stringify(res.data.name);
        this.form.classtax.name = res.data.taxName;
        this.form.classtax.code = res.data.taxCode;
        this.form.classtax.taxRate = res.data.taxRate;
        this.form.classtax.id = res.data.taxCodeId;
        this.form.administratoritem.userName =
          res.data.userDataAuthorityAccount;
        this.form.administratoritem.realName = res.data.userDataAuthorityName;
        this.form.administratoritem.id = res.data.managerUserId;
      });
    },
    taxChange(val) {
      this.form.tax = this.taxclass.filter(n => {
        return n.id == val;
      })[0];
    },
    update() {
      var that = this;
      update3(that.id, {
        name: that.form.name,
        taxCodeId: this.form.classtax.id,
        managerUserId: this.form.administratoritem.id
      }).then(res => {
        if (res.code == "000000") {
          if (res.data == 1) {
            this.$message({
              message: "分类编辑成功，保存至草稿",
              type: "success"
            });
            this.close({
              name: "CategoryUpdate3",
              to: { name: "Category3", params: { isUpdate: true } }
            });
          } else {
            this.$message({
              message: "操作失败",
              type: "error"
            });
          }
        }
      });
    },
    addDraft(formName) {
      var that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.update();
        } else {
          return false;
        }
      });
    },
    updateSubmit() {
      var that = this;
      updateSubmit3(that.id, {
        name: that.form.name,
        taxCodeId: this.form.classtax.id,
        managerUserId: this.form.administratoritem.id
      }).then(res => {
        if (res.code == "000000") {
          if (res.data == 1) {
            this.$message({
              message: "分类编辑成功，并提交审核",
              type: "success"
            });
            this.close({
              name: "CategoryUpdate3",
              to: { name: "Category3", params: { isUpdate: true } }
            });
          } else {
            this.$message({
              message: "操作失败",
              type: "error"
            });
          }
        }
      });
    },
    addReview(formName) {
      var that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.updateSubmit();
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style>
.parent-name .el-input__inner {
  color: red !important;
}
</style>
<style scoped lang="less">
.addSecond {
  .footerBox {
    margin: 40px 0 0 0;
    position: relative;
    border: 1px solid #e4e4e4;
    .el-input {
      height: 30px;
      width: 400px;
    }
    .el-form {
      padding: 20px 50px;
      .el-form-item {
        .deleteBox {
          margin-left: 10px;
        }
        .hierarchy {
          color: red;
        }
      }
    }
  }
}
</style>
